<template>
  <div class="pinia-demo">
    <h2>Pinia 状态管理</h2>
    
    <!-- 介绍部分 -->
    <div class="introduction">
      <p>Pinia 是 Vue 3 官方推荐的状态管理库，提供了更简洁的 API 和更好的 TypeScript 支持。</p>
    </div>

    <!-- 1. 基础状态管理 -->
    <section class="demo-section">
      <h3>1. 基础状态管理</h3>
      <div class="demo-content">
        <div class="counter-display">
          <h4>计数器</h4>
          <div class="count-value">{{ counterStore.count }}</div>
          <div class="buttons">
            <button @click="counterStore.increment()" class="btn">+</button>
            <button @click="counterStore.decrement()" class="btn">-</button>
            <button @click="counterStore.incrementBy(5)" class="btn btn-secondary">+5</button>
            <button @click="counterStore.reset()" class="btn btn-danger">重置</button>
          </div>
        </div>
        
        <div class="double-count">
          <p>计数的两倍: <strong>{{ counterStore.doubleCount }}</strong></p>
        </div>
      </div>
    </section>

    <!-- 2. Getters 和 Actions -->
    <section class="demo-section">
      <h3>2. Getters 和 Actions</h3>
      <div class="demo-content">
        <div class="user-store">
          <h4>用户管理</h4>
          <div v-if="userStore.isLoading" class="loading">加载中...</div>
          <div v-else-if="userStore.error" class="error">{{ userStore.error }}</div>
          <div v-else-if="userStore.currentUser" class="user-info">
            <div class="user-details">
              <p><strong>用户名:</strong> {{ userStore.currentUser.username }}</p>
              <p><strong>邮箱:</strong> {{ userStore.currentUser.email }}</p>
              <p><strong>角色:</strong> {{ userStore.currentUser.role }}</p>
              <p><strong>加入时间:</strong> {{ userStore.userFormattedDate }}</p>
            </div>
            <p class="user-status">状态: <span :class="['status-badge', userStore.currentUser.isActive ? 'active' : 'inactive']">
              {{ userStore.currentUser.isActive ? '活跃' : '非活跃' }}
            </span></p>
            <button @click="userStore.logout()" class="btn btn-danger">登出</button>
          </div>
          <div v-else>
            <div class="login-form">
              <input v-model="username" type="text" placeholder="用户名" class="input">
              <input v-model="password" type="password" placeholder="密码" class="input">
              <button @click="login" class="btn">登录</button>
            </div>
            <div class="login-options">
              <p>测试账号:</p>
              <button @click="useTestAccount('admin')" class="btn btn-small">管理员</button>
              <button @click="useTestAccount('user')" class="btn btn-small">普通用户</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 3. 购物车示例 -->
    <section class="demo-section">
      <h3>3. 购物车示例</h3>
      <div class="demo-content">
        <div class="product-list">
          <h4>商品列表</h4>
          <div class="products">
            <div v-for="product in products" :key="product.id" class="product-item">
              <div class="product-info">
                <h5>{{ product.name }}</h5>
                <p class="price">¥{{ product.price }}</p>
              </div>
              <button @click="addToCart(product)" class="btn">加入购物车</button>
            </div>
          </div>
        </div>
        
        <div class="cart">
          <h4>购物车 ({{ cartStore.totalItems }})</h4>
          <div v-if="cartStore.items.length === 0" class="empty-cart">
            购物车是空的
          </div>
          <div v-else>
            <div class="cart-items">
              <div v-for="item in cartStore.items" :key="item.id" class="cart-item">
                <div class="item-info">
                  <p class="item-name">{{ item.name }}</p>
                  <p class="item-price">¥{{ item.price }} x {{ item.quantity }}</p>
                </div>
                <div class="item-controls">
                  <button @click="cartStore.decreaseItemQuantity(item.id)" class="btn btn-small">-</button>
                  <span class="quantity">{{ item.quantity }}</span>
                  <button @click="cartStore.increaseItemQuantity(item.id)" class="btn btn-small">+</button>
                  <button @click="cartStore.removeItem(item.id)" class="btn btn-small btn-danger">×</button>
                </div>
              </div>
            </div>
            <div class="cart-summary">
              <p class="subtotal">小计: <strong>¥{{ cartStore.subtotal }}</strong></p>
              <p class="tax">税费: <strong>¥{{ cartStore.tax }}</strong></p>
              <p class="total">总计: <strong>¥{{ cartStore.total }}</strong></p>
              <button @click="cartStore.clearCart()" class="btn btn-danger">清空购物车</button>
              <button @click="checkout" class="btn btn-primary">结算</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 4. 模块化状态管理 -->
    <section class="demo-section">
      <h3>4. 模块化状态管理</h3>
      <div class="demo-content">
        <div class="theme-demo">
          <h4>主题切换</h4>
          <div class="theme-options">
            <button @click="themeStore.setTheme('light')" :class="['theme-btn', { active: themeStore.theme === 'light' }]">
              浅色主题
            </button>
            <button @click="themeStore.setTheme('dark')" :class="['theme-btn', { active: themeStore.theme === 'dark' }]">
              深色主题
            </button>
            <button @click="themeStore.setTheme('blue')" :class="['theme-btn', { active: themeStore.theme === 'blue' }]">
              蓝色主题
            </button>
          </div>
          <div class="theme-preview" :class="`theme-${themeStore.theme}`">
            <p>这是一个主题预览区域</p>
            <p>当前主题: {{ themeStore.themeName }}</p>
            <p>主色调: {{ themeStore.primaryColor }}</p>
          </div>
        </div>
        
        <div class="settings-demo">
          <h4>用户设置</h4>
          <div class="settings-options">
            <div class="setting-item">
              <label>
                <input type="checkbox" v-model="settingsStore.notifications">
                启用通知
              </label>
            </div>
            <div class="setting-item">
              <label>
                <input type="checkbox" v-model="settingsStore.darkMode">
                暗色模式
              </label>
            </div>
            <div class="setting-item">
              <label>语言:</label>
              <select v-model="settingsStore.language" class="select">
                <option value="zh-CN">简体中文</option>
                <option value="en-US">English</option>
                <option value="ja-JP">日本語</option>
              </select>
            </div>
          </div>
          <div class="settings-info">
            <p>当前设置已保存到 settings store</p>
            <CodeBlock :code="JSON.stringify(settingsStore.currentSettings, null, 2)" language="json"></CodeBlock>
            <button @click="settingsStore.resetSettings()" class="btn btn-secondary">重置设置</button>
          </div>
        </div>
      </div>
    </section>

    <!-- 5. 持久化示例 -->
    <section class="demo-section">
      <h3>5. 数据持久化</h3>
      <div class="demo-content">
        <div class="persistence-demo">
          <h4>持久化存储</h4>
          <p>这个示例展示了如何使用 Pinia 配合本地存储实现数据持久化</p>
          
          <div class="persistent-form">
            <input v-model="persistStore.username" type="text" placeholder="输入用户名" class="input">
            <input v-model="persistStore.theme" type="text" placeholder="输入主题偏好" class="input">
            <button @click="persistStore.savePreferences()" class="btn">保存偏好设置</button>
            <button @click="persistStore.clearPreferences()" class="btn btn-danger">清除偏好设置</button>
          </div>
          
          <div class="persistence-info">
            <p>当前保存的偏好设置:</p>
            <CodeBlock v-if="persistStore.preferences" :code="JSON.stringify(persistStore.preferences, null, 2)" language="json"></CodeBlock>
            <p v-else>没有保存的偏好设置</p>
            <p class="hint">刷新页面后，数据将从 localStorage 中恢复</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useCounterStore } from '@store/counter';
// 这个导入被注释掉，因为实际使用的是示例代码中的store定义
// import { useUserStore } from '@store/user'
// 这些导入被注释掉，因为实际使用的是示例代码中的store定义
  // import { useCartStore } from '@store/cart'
  // import { useThemeStore } from '@store/theme'
// 这些导入被注释掉，因为实际使用的是示例代码中的store定义
  // import { useSettingsStore } from '@store/settings'
  // import { usePersistenceStore } from '@store/persistence'
import CodeBlock from '@components/CodeBlock.vue'

// 使用实际的 Pinia stores
const counterStore = useCounterStore()
const userStore = useUserStore()
const cartStore = useCartStore()
const themeStore = useThemeStore()
const settingsStore = useSettingsStore()
const persistStore = usePersistenceStore()

// 组件内状态
const username = ref('')
const password = ref('')

// 模拟产品数据
const products = ref([
  { id: 1, name: 'Vue 3 入门指南', price: 89.00 },
  { id: 2, name: 'Pinia 状态管理', price: 69.00 },
  { id: 3, name: 'Vue Router 路由管理', price: 79.00 },
  { id: 4, name: 'Vue 3 组合式 API', price: 99.00 },
  { id: 5, name: 'Vue 3 企业级应用', price: 129.00 }
])

// 方法
const login = () => {
  if (username.value && password.value) {
    userStore.login(username.value, password.value)
  } else {
    userStore.error = '请输入用户名和密码'
  }
}

const useTestAccount = (type) => {
  username.value = type
  password.value = 'password'
}

const addToCart = (product) => {
  cartStore.addItem(product)
}

const checkout = () => {
  alert(`结算成功！总计: ¥${cartStore.total}`)
  cartStore.clearCart()
}

// 初始化时加载持久化数据
onMounted(() => {
  persistStore.loadPreferences()
})
</script>

<style scoped>
.pinia-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.introduction {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.demo-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  color: #42b983;
  margin-bottom: 20px;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
}

.demo-content {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #3aa876;
}

.btn-small {
  padding: 4px 12px;
  font-size: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary {
  background-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-danger {
  background-color: #dc3545;
}

.btn-danger:hover {
  background-color: #c82333;
}

.btn-primary {
  background-color: #007bff;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 100%;
  margin-bottom: 10px;
}

.select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* 计数器样式 */
.counter-display {
  text-align: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.count-value {
  font-size: 48px;
  font-weight: bold;
  color: #42b983;
  margin: 20px 0;
}

.buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.double-count {
  text-align: center;
  margin-top: 15px;
  padding: 10px;
  background-color: #e3f2fd;
  border-radius: 6px;
  font-size: 18px;
}

/* 用户管理样式 */
.user-store {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error {
  text-align: center;
  padding: 20px;
  color: #dc3545;
  background-color: #f8d7da;
  border-radius: 6px;
}

.user-info {
  margin-bottom: 20px;
}

.user-details {
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.user-status {
  margin-bottom: 15px;
}

.status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.status-badge.active {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.inactive {
  background-color: #f8d7da;
  color: #721c24;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.login-options {
  text-align: center;
}

.login-options p {
  margin-bottom: 10px;
}

/* 购物车样式 */
.product-list,
.cart {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.products {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
}

.product-info h5 {
  margin: 0 0 5px 0;
}

.price {
  font-weight: bold;
  color: #e74c3c;
  margin: 0;
}

.empty-cart {
  text-align: center;
  padding: 40px;
  color: #666;
  font-style: italic;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.cart-item {
  background-color: white;
  padding: 15px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-name {
  font-weight: bold;
  margin: 0 0 5px 0;
}

.item-price {
  color: #666;
  margin: 0;
}

.item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quantity {
  min-width: 20px;
  text-align: center;
}

.cart-summary {
  background-color: white;
  padding: 15px;
  border-radius: 6px;
}

.cart-summary p {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.cart-summary .total {
  font-size: 18px;
  font-weight: bold;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

.cart-summary .btn {
  margin-top: 15px;
  width: 100%;
}

/* 主题样式 */
.theme-demo,
.settings-demo {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.theme-options {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.theme-btn {
  padding: 8px 16px;
  border: 2px solid #ddd;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.theme-btn.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

.theme-preview {
  padding: 30px;
  border-radius: 8px;
  color: white;
  text-align: center;
  transition: all 0.3s;
}

.theme-light {
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
}

.theme-dark {
  background-color: #2c3e50;
  color: white;
}

.theme-blue {
  background-color: #2196f3;
  color: white;
}

.setting-item {
  margin-bottom: 15px;
}

.setting-item label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.setting-item input[type="checkbox"] {
  width: auto;
}

.setting-item .select {
  margin-left: 10px;
}

.settings-info {
  margin-top: 20px;
  background-color: white;
  padding: 15px;
  border-radius: 6px;
}

.settings-info pre {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

/* 持久化样式 */
.persistence-demo {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  grid-column: 1 / -1;
}

.persistent-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
  margin-bottom: 20px;
}

.persistent-form .btn {
  margin-top: 5px;
}

.persistence-info pre {
  background-color: #e9ecef;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.hint {
  font-style: italic;
  color: #666;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demo-content {
    grid-template-columns: 1fr;
  }
  
  .product-item,
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .item-controls {
    align-self: flex-end;
  }
  
  .buttons {
    flex-direction: column;
  }
  
  .theme-options {
    flex-direction: column;
  }
  
  .theme-btn {
    width: 100%;
  }
}
</style>